<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title></title>

  <link href="lib/ionic/css/ionic.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">

  <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
  <link href="css/ionic.app.css" rel="stylesheet">
  -->

  <!-- ionic/angularjs js -->
  <script src="lib/ionic/js/ionic.bundle.js"></script>

  <!-- cordova script (this will be a 404 during development) -->
  <script src="cordova.js"></script>

  <!-- your app's js -->
  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/services.js"></script>
</head>
<body ng-app="starter">

<!--头部-->
<div class="bar bar-header bar-dark item-icon-right ">
  <p class="title">微信</p>
  <div class="icon has-badge">
    <i class=" icon ion-android-add has-badge"></i>
    <i class="badge badge-assertive">1</i>

  </div>

</div>
<div class="item item-input-inset item-icon-right">
  <label class="item item-input-wrapper" style="height: 100%;margin-top: 40px;padding: 0px">
    <input  type="text"  placeholder="请输入朋友的昵称" >
     <i class="icon ion-ios-search"></i>
  </label>
</div>
<!--内容-->
<div class="content" style="margin-top: 10px">
  <ul class="list">
    <li class="item item-avatar-left">
      <i class="icon ion-ios-personadd energized-bg light" style="font-size: 30px;width: 50px;height: 50px;position: absolute;top: 10px;left: 10px;padding: 10px"></i>
      <p style="padding-top: 10px">新的朋友</p>
      </li>
    <li class="item item-avatar-left">
      <i class="icon ion-person-stalker balanced-bg light" style="font-size: 30px;width: 50px;height: 50px;position: absolute;top: 10px;left: 10px;padding: 10px"></i>
      <p style="padding-top: 10px">群聊</p>
      </li>
    <li class="item item-avatar-left">
      <i class="icon ion-pricetags positive-bg light" style="font-size: 30px;width: 50px;height: 50px;position: absolute;top: 10px;left: 10px;padding: 10px"></i>
      <p style="padding-top: 10px">标签</p>
      </li>
    <li class="item item-avatar-left">
      <i class="icon ion-android-contact positive-bg light" style="font-size: 30px;width: 50px;height: 50px;position: absolute;top: 10px;left: 10px;padding: 10px"></i>
      <p style="padding-top: 10px">公众号</p>
      </li>
  </ul>
  <ul class="list">
    <div style="background-color: lightgrey;width: 100%;height: 20px;padding-left: 21px">A</div>
    <li class="item item-avatar-left">
      <img src="img/1.jpg" alt="">
      <p style="line-height: 40px">阿亮</p>
    </li>
    <li class="item item-avatar-left">
      <img src="img/1.jpg" alt="">
      <p style="line-height: 40px">啊猛</p>
    </li>
    <div style="background-color: lightgrey;width: 100%;height: 20px;padding-left: 21px">D</div>
    <li class="item item-avatar-left">
      <img src="img/1.jpg" alt="">
      <p style="line-height: 40px">大卫</p>
    </li>
    <li class="item item-avatar-left">
      <img src="img/1.jpg" alt="">
      <p style="line-height: 40px">大胡子</p>
    </li>
    <li class="item item-avatar-left">
      <img src="img/1.jpg" alt="">
      <p style="line-height: 40px">大胸妹</p>
    </li>
    <div style="background-color: lightgrey;width: 100%;height: 20px;padding-left: 21px">X</div>
    <li class="item item-avatar-left">
      <img src="img/1.jpg" alt="">
      <p style="line-height: 40px">小师妹</p>
    </li>
    <li class="item item-avatar-left">
      <img src="img/1.jpg" alt="">
      <p style="line-height: 40px">小屁孩</p>
    </li>
  </ul>
</div>
<!--尾部-->
<div class="tabs tabs-stable tabs-icon-top">
  <a class="tab-item"><i class="icon ion-ios-chatbubble-outline"></i>微信</a>
  <a class="tab-item  active assertive "><i class="icon ion-ios-personadd-outline"></i>通讯录</a>
  <a class="tab-item has-badge"><i class="icon ion-ios-navigate-outline"></i>发现 <i class="badge badge-assertive">2</i></a>
  <a class="tab-item"><i class="icon ion-ios-person-outline"></i>我</a>
</div>
</body>
</html>
